<!--
 * @Author: Xujianchen
 * @Date: 2025-10-23 15:37:12
 * @LastEditTime: 2025-11-08 21:52:23
 * @LastEditors: Xujianchen
 * @Description: 主题切换组件
-->
<template>
  <div class="theme" @click="toggleTheme">
    <Icon :name="isDark ? 'light' : 'dark'" :type="ICON_TYPE.SVG" />
  </div>
</template>

<script setup lang="ts">
import { ICON_TYPE } from '@/const'
import { THEME_KEY, LIGHT_THEME, DARK_THEME } from '@/const/theme'
import useConfigStore from '@/store/modules/config'

const emits = defineEmits<{
  (e: 'change', theme: string): void
}>()

const configStore = useConfigStore()

const isDark = computed(() => configStore.isDark)
const globalConfig = computed(() => configStore.globalConfig)

function toggleTheme() {
  configStore.setConfig(THEME_KEY, !isDark.value ? DARK_THEME : LIGHT_THEME)
  emits('change', globalConfig.value.theme)
}
</script>

<style scoped lang="scss">
.theme {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
  background-color: var(--app-white-color);
  box-shadow:
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
  &:hover {
    background-color: var(--app-primary-color);
    color: var(--app-white-color);
  }
}

html.dark .theme {
  background-color: var(--app-primary-color);
  color: var(--app-white-color);
}
</style>
